<ng-container *ngIf="['org.write$'] | hasRole as canwrite$">
  <div class="domain-top-view">
    <div>
      <div class="domain-title-row">
        <h2>{{ 'ORG.DOMAINS.TITLE' | translate }}</h2>
        <a
          mat-icon-button
          href="https://zitadel.com/docs/guides/manage/console/organizations#how-zitadel-handles-usernames"
          rel="noreferrer"
          target="_blank"
        >
          <mat-icon class="icon">info_outline</mat-icon>
        </a>
      </div>
      <p class="domain-desc cnsl-secondary-text">{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}</p>
    </div>
    <span class="fill-space"></span>

    <button
      [disabled]="(canwrite$ | async) === false"
      matTooltip="Add domain"
      mat-raised-button
      color="primary"
      class="cnsl-action-button"
      (click)="addNewDomain()"
    >
      <div class="cnsl-action-button">
        <mat-icon>add</mat-icon>
        <span>{{ 'ACTIONS.NEW' | translate }}</span>
        <cnsl-action-keys (actionTriggered)="addNewDomain()"> </cnsl-action-keys>
      </div>
    </button>
  </div>

  <cnsl-card *ngFor="let domain of domains" class="domain-card">
    <div class="domain">
      <span class="title">{{ domain.domainName }}</span>

      <i matTooltip="verified" *ngIf="domain.isVerified" class="verified las la-check-circle"></i>
      <i matTooltip="primary" *ngIf="domain.isPrimary" class="primary las la-star"></i>
      <a
        *ngIf="domain.isVerified && !domain.isPrimary && (canwrite$ | async)"
        class="primaryset"
        (click)="setPrimary(domain)"
        >{{ 'ORG.DOMAINS.SETPRIMARY' | translate }}</a
      >

      <span class="fill-space"></span>
      <button
        mat-icon-button
        [disabled]="(canwrite$ | async) === false || domain.isVerified"
        *ngIf="verifyOrgDomains"
        (click)="verifyDomain(domain)"
      >
        <i class="las la-pen"></i>
      </button>
      <button
        class="domain-rem-button"
        [disabled]="(canwrite$ | async) === false || domain.isPrimary"
        matTooltip="Remove domain"
        color="warn"
        mat-icon-button
        (click)="removeDomain(domain.domainName)"
      >
        <i class="las la-trash"></i>
      </button>
    </div>
  </cnsl-card>
</ng-container>
